import { ComponentProps, Hook, Mut, VueComponent } from "vue3-oop"
import { Collapse, CollapsePanel, Col } from 'ant-design-vue';
import Draggable from 'vuedraggable';
import FdnWidget from '../fdn-widget'
import { ExpandOutlined, LeftOutlined, RightOutlined, CloseOutlined, DragOutlined } from '@ant-design/icons-vue'

import moduleCss from './fdn-collapse.module.scss'
import { FormData, WidgetNode, ReserveItem } from '../../types/index'

import { LAYOUT, COLLAPSE } from '../attr-widget'

interface IProps {
  formData: FormData,
  widgetNode: WidgetNode
}
export default class FdnCollapse extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    formData: {},
    widgetNode: {}
  }

  constructor(
  ) {
    super();
  }

  @Mut() state = {
    activeKey: ['COLLAPSE_PANEL']
  }

  // 拖动新增组件
  handleDragAddDraftFormWidget = (event: any) => {
    const { formData, widgetNode } = this.props;
    // 获取darggable组件列表新增项的下标
    const newIndex = event.newIndex;
    const targetList = widgetNode.children;
    const targetNode = targetList[newIndex];

    if (targetNode.widgetId) {
      // 已存在组件
      targetNode.parentId = widgetNode.widgetId;
      targetNode.setSelected();
    } else {
      // 新增组件
      const reserveItem = (targetNode as any) as ReserveItem;
      formData.createNewWidgetNode(widgetNode, reserveItem, newIndex);
    }

  };

  @Hook('Mounted')
  onMounted() {
    const form = document.querySelector('.designer-draft-form')
    // console.log(form?.scrollWidth)
  }

  render() {
    const { formData, widgetNode } = this.props;
    const widgetItem = widgetNode.widgetItem;
    const attr = widgetItem[widgetItem.type] as COLLAPSE;

    let defaultSpan = attr.defaultSpan;
    defaultSpan = defaultSpan ? defaultSpan : 24;

    // 水平间距
    const gutterHorizon = attr.gutter[0][formData.winSize];
    // 垂直间距
    const gutterVertical = attr.gutter[1][formData.winSize]

    return (
      <Collapse
        activeKey={this.state.activeKey}
        onChange={(values)=>{this.state.activeKey = values as string[]}}
        class={[moduleCss['fdn-collapse']]}
      >
        <CollapsePanel header={attr.title} key='COLLAPSE_PANEL' >
          <Draggable
            {...{
              animation: "300",
              group: {
                name: 'form'
              },
              chosenClass: "chosenClass",
              dragClass: "dragClass",
              ghostClass: "ghostClass",
              onAdd: this.handleDragAddDraftFormWidget
            }}
            class={['ant-row', `default-span-${defaultSpan}`]}
            item-key="id"
            list={widgetNode.children}
            style={{
              flexWrap: 'wrap',
              alignContent: 'flex-start',
              minHeight: '56px',
              rowGap: `${gutterVertical}px`
            }}
            componentData={{}}
          >
            {{
              item: ({ element }: any) => {
                const childNode = element as WidgetNode;
                if (childNode.widgetId) {
                  const childItem = childNode.widgetItem;
                  const childAttr = childItem[childItem.type] as LAYOUT;
                  const isActive = childNode.isSelected();
                  const activeClass = isActive ? 'active' : undefined;

                  return (childNode.widgetId &&
                    <Col
                      class={[moduleCss['drag-item'], 'ant-col', activeClass]}
                      {...{
                        onClick: (event: MouseEvent) => {
                          event.stopPropagation();
                          childNode.setSelected();
                        },
                        style: {
                          height: 'unset',
                          padding: `0 ${gutterHorizon / 2}px`
                        },
                        ...childAttr.layout_reactive
                      }}
                    >
                      <FdnWidget
                        formData={formData}
                        widgetNode={childNode}
                      />
                      {isActive &&
                        <div class={[moduleCss['drag-tool']]}>
                          {/* 选择外层组件 */}
                          <ExpandOutlined
                            onClick={(event: MouseEvent) => {
                              event.stopPropagation();
                              childNode.setParentSelected();
                            }}
                          />
                          {/* 前移一位 */}
                          <LeftOutlined
                            onClick={(event: MouseEvent) => {
                              event.stopPropagation();
                              childNode.moveFoward();
                            }}
                          />
                          {/* 后移一位 */}
                          <RightOutlined
                            onClick={(event: MouseEvent) => {
                              event.stopPropagation();
                              childNode.moveBackwards();
                            }}
                          />
                          {/* 删除组件 */}
                          <CloseOutlined
                            onClick={(event: MouseEvent) => {
                              event.stopPropagation();
                              childNode.remove();
                            }}
                          />
                          {/* 拖动组件 */}
                          <DragOutlined style={{ cursor: 'move' }} />
                        </div>
                      }
                    </Col>
                  )
                }
              }
            }}
          </Draggable>
        </CollapsePanel>
      </Collapse>

    )
  }
}